<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<html>
<head>
    <title>退款详情</title>
    <link rel="stylesheet" href="${ctx}/css/common/common.css">
    <link rel="stylesheet" href="${ctxStatic}/layui-v2.2.45/layui/css/layui.css">
    <script type="text/javascript" src='${ctxStatic}/jquery/jquery-2.1.4.min.js'></script>
    <style type="text/css">
        .ui-step li {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: left;
            margin-bottom: 46px;
        }

        .ui-step .ui-step-title {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .ui-step li::after {
            left: 50%;
        }

        .ui-step:after {
            content: "";
            display: table;
            clear: both;
        }

        .ui-step-done .iconfont {
            font-size: 36px;
            padding: 0;
            position: relative;
        }

        .success-color {
            color: #e8473f;
        }

        .loading-color {
            color: #999;
        }

        .ui-step {
            width: 100px;
            margin: 0px auto;
        }

        .ui-step i::after {
            position: absolute;
            left: 0;
            top: 36px;
            display: block;
            content: ' ';
            width: 4px;
            height: 50px;
            background: #e8473f;
            z-index: 1;
            margin: 0px 16px;
        }

        .ui-step-right {
            position: absolute;
            left: 55px;
            top: 8px;
            text-align: left;
            width: 200px;
        }

        .ui-step-done {
            position: relative;
        }

        .ui-step li:last-child {
            margin-bottom: 0px;
        }

        .ui-step li:last-child i::after {
            width: 0px;
            height: 0px;
        }
    </style>
</head>
<body>
<div style="padding: 10px; margin-top: 30px">
    <ul class="ui-step ui-step-4">
        <li class="ui-step-done">
            <div><i class="iconfont btn-icon icon-roundcheck-copy success-color"></i></div>
            <div class="ui-step-right">
                <div class="ui-step-title">提交成功</div>
                <div class="ui-step-meta"><fmt:formatDate value="${refundPlan.createDate}" pattern="MM-dd HH:mm"/></div>
            </div>
        </li>
        <li class="ui-step-done">
            <c:choose>
                <c:when test="${refundPlan.result == 0 && refundPlan.status == 0}">
                    <div><i class="iconfont btn-icon icon-roundclose-copy loading-color"></i></div>
                    <div class="ui-step-right">
                        <div class="ui-step-title">退款已取消</div>
                        <div class="ui-step-meta"><fmt:formatDate value="${refundPlan.updateDate}" pattern="MM-dd HH:mm"/></div>
                    </div>
                </c:when>
                <c:when test="${refundPlan.result == 0 || refundPlan.result == 1}">
                    <div>
                        <i class="iconfont btn-icon icon-time-copy ${refundPlan.result == 1 ? 'success-color' : 'loading-color'}"></i>
                    </div>
                    <div class="ui-step-right">
                        <div class="ui-step-title" style="display: inline-block;margin-right: 5px;">处理中</div>
                    </div>
                </c:when>
            </c:choose>
        </li>
        <c:if test="${refundPlan.result == 1}">
            <li class="ui-step-done">
                <div><i class="iconfont btn-icon icon-roundcheck-copy success-color"></i></div>
                <div class="ui-step-right">
                    <div class="ui-step-title">退款申请已处理</div>
                    <div class="ui-step-meta">
                        <fmt:formatDate value="${refundPlan.updateDate}" pattern="MM-dd HH:mm"/>
                    </div>
                </div>
            </li>
        </c:if>
    </ul>
    <p style="text-align: center; margin-top: 20px">
        <c:if test="${refundPlan.result == 1}">
            本次共提交退款${refundTotal}人，退款成功${refundSuccess}人，退款失败${refundFailure}人
        </c:if>
        <c:if test="${refundPlan.result == 0 && refundPlan.status == 1}">
            本次共提交退款${refundTotal}人，退款申请成功，预计48小时内到账
        </c:if>
    </p>
</div>
</body>
<script type="text/javascript" src="${ctx}/script/common/util.js"></script>
</html>